<template>
    <div class="menu">
     <!-- <ul class="menu&#45;&#45;container" ref="menuContainer">
        <li class="menu&#45;&#45;container_item"
            v-for="(item,key) in menu"
            :key="key"
            @click="toggleRouterTo(key)">
          <span :class="{'fousColor': key === index }">{{item.name}}</span>
        </li>
        <li :style="{left: menuCurrentIndex*2.1 + 'rem'}" class="menu&#45;&#45;container&#45;&#45;bottom__slider"></li>
      </ul>-->
      <van-tabs @click="toggleRouteTo">
        <van-tab v-for="key in menu" :title="key.name">
          {{key.name}}
        </van-tab>
      </van-tabs>
    </div>
</template>

<script>
  export default {
    name: "Containermenu",
    data() {
      return {
        index: 0,
        menu: [
          {name: '推荐', componentName: 'Recommend', type: 'Recommend'},
          {name: '美妆护肤', componentName: 'Beauty', type: 'Beauty'},
          {name: '超值百货', componentName: 'general', type: 'general'},
          {name: '名品腕表', componentName: 'wristwatch', type: 'wristwatch'},
          {name: '品质家电', componentName: 'furnishings', type: 'furnishings'},
          {name: '时尚箱包', componentName: 'bags', type: 'bags'},
          {name: '精选配件', componentName: 'parts', type: 'parts'},
          {name: '黄金珠宝', componentName: 'Jewellery', type: 'Jewellery'},
          {name: '手机', componentName: 'phone', type: 'phone'},
        ],
        menuCurrentIndex:0,
        scroller:'',
      }
    },
    methods: {
      /* toggleRouterTo(key) {
         this.index=key;
         this.menuCurrentIndex = key;
         var _width = parseInt(getComputedStyle(this.$refs.menuContainer)['width']) / 10;
         if (key >= 2&&key<=3) {
           this.scroller.scrollTo((key - 2) * -(_width+20), 0, 0)
         }
         this.$routes.push('/Mall/'+this.menu[key].componentName);
       },
       getCen(key) {
         this.$routes.push('/Mall/'+this.menu[key].componentName);
       },*/
      toggleRouteTo(key){
        /*    this.$toast(item);*/
        this.index=key;
        this.$routes.push('/root/Mall/'+this.menu[key].componentName);
      }
    },
    mounted() {
      /* eslint-disable */
      /* this.scroller = new this.$BS('.menu', {
         scrollX: true,
         scrollY: false,
         click: true,
       });*/
    },
  }
</script>

<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }

  .menu {
    width: 100vw;
    overflow: hidden;
    background: #fff;
  }
  //标签页样式
  .menu>.van-tabs>.van-tabs__content{
    display: none;
  }
  .van-tabs__line{
    background-color: #196fe3;
  }
  .menu--container {
    height: 1.0933rem;
    /*background: #fff;*/
    position: relative;
    float: left;
    width:11rem;
    .menu--container_item {
      float: left;
      width: 2.1rem;
      line-height: 1.0933rem;
      text-align: center;
      font-size: .4rem;
      box-sizing: border-box;
    }
    .menu--container_item:first-child {
      /*padding-left: .32rem;*/
      /*text-indent: .4rem;
      padding-left: .1rem;*/
    }
    .menu--container--bottom__slider {
      position: absolute;
      width: 21vw;
      bottom: .1rem;
      left: 0;
      height: 3px;
      border-radius: 10px;
      transition: all .4s ease;
      &::before {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 50%;
        max-width: 50px;
        height: 2px;
        border-radius: 10px;
        background: #176fe3;
      }
    }
    .fousColor {
      color: #176fe3;
    }
  }
</style>
